﻿<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <title>DataView Example</title> 
	<link type="text/css" href="css/ui.all.css" rel="stylesheet" />	
	<style>
		div.thumb{
			overflow:hidden;
			margin:1px;
			width:85px !important; height:85px !important;
			float:left;
			background-repeat: no-repeat;
			z-index: 10;
		}
		div.container{
			width: 437px; 
			overflow:hidden;
		}
		body{
			height:410px;
			font-family: calibri, tahoma;
			text-size:10pt;
			overflow:hidden;
		}
		.thumb_all{
			
			margin:-15px;
			border:15px solid black;
			z-index:1000;
		}
		.pageSelector{
			text-align:right;
			margin:5px;
			min-width: 40px;
			height:22px;
			font-size:10pt;
			cursor: pointer;
			color:#98a2ac;
		}
		.pageSelector:hover{
			color:#6e1c1c;
			text-decoration: underline;
		}
		li{font-size:10px;}
	</style>
		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
		<script type="text/javascript" src="js/jquery.thumbs.js"></script> 
		<script type="text/javascript" src="js/jquery.xml.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="thumbs.css" media="screen" /> 
<script>


	var popup = {
			data: null,
			uid: function(){
				return localStorage.getItem('uid');
			},
			init: function(){
				$('#tabs').tabs({
					select: function(event, ui) {
						localStorage.setItem('lastOpenedTab', ui.index);
					},
					selected: (localStorage.getItem('lastOpenedTab')?localStorage.getItem('lastOpenedTab'):0)
				});
				this.getTop();
				if(this.uid())
				{
					this.getMy();
					this.getFavorites();
					this.getUserInfo();
				} else 
					this.needLogin();
			},
			get: function(){
				try
				{
					var sXml = localStorage.getItem('data');
					this.data = (new DOMParser()).parseFromString(sXml, "text/xml");
				} catch(e)
				{
					alert(e);
				}
			},
			makeThumbs: function(data, cont, item, page){
				$(cont).html("");
				try{
					if (!item)	item = "psphoto";
					if (!page) page = 0;

					$(data).find(item).each(function(i, val) {
						if(i>=page && i<page+20){
							var icon, title, link;
							if($(this).attr("icon_file_url")){
								title = $(this).attr("title");
								link = $(this).attr("photo_url");
								icon = $(this).attr("icon_file_url");
							} else {
								link = $("link", this).text();
								title = $("title", this).text();
								icon = popup.getImgUrlFromRss($("description",this).text());
							}
							//alert(title+"\n"+link +"\n"+ icon);
							$("<A />").attr("href", link).attr("target", "_main").append(
								$("<DIV />").
									attr("id", "thumb").
									addClass("thumb").
									css("background-image",  "URL('" +icon+ "')").
									attr("title", title).
									thumbImg(icon,title)
							).appendTo(cont);
						}
					});
					if($(item, data).size()>20){
						for (i=0; i<$(item, data).size(); i+=20){
							$(cont).append(
								$("<span />").attr("page", i).addClass("pageSelector").text((i+1)+"-"+(i+20)).click(function(){
									popup.makeThumbs(data, cont, item,parseInt( $(this).attr("page") ));
								})
							);
						}
					}
				} catch(e){
					//popup.needLogin();
				}
			}, 
			getImgUrlFromRss: function(txt){
				var rx = new RegExp("<img src=\"(.*)\"\/>","igm");
				return rx.exec(txt)[1];
			},
			getMy: function(){
				this.getXml("xmlMy", function(data)
				{
					popup.makeThumbs(data, "#my");
				});
			},
			getFavorites: function(){
				this.getXml("xmlFavorites", function(data)
				{
					popup.makeThumbs(data, "#favorites");
				});
			},
			getTop: function(){
				this.getXml("xmlTop", function(data)
				{
					popup.makeThumbs(data, "#top", "item");
				});
			},
			//http://www.photosight.ru/top/top_favorites
			getTopFavorites: function(){
				this.getXml("xmlTop", function(data)
				{
					popup.makeThumbs(data, "#top", "item");
				});
			},
			getUserInfo: function(){
			
				this.getXml("xmlMember", function(data){
					$("#loader").hide();
					$("#info_table").css("display", "block");
					$("#main_link").attr("href", $(data).find("item").find("link").text());
					
					var psm = $(data).find("psmember");
					$("#avatar").attr("src", psm.attr("avatar"));
					$("#nick").text(psm.attr("nick"));
					$("#status").text(psm.attr("status_name"));
					
					$("#statusUp").text(psm.attr("status_votes_up"));
					$("#statusDown").text(psm.attr("status_votes_down"));
					$("#statusStay").text(psm.attr("status_votes_confirmed"));

					$("#favourited_authors").text(psm.attr("favourited_authors"));
					$("#favourited_commenters").text(psm.attr("favourited_commenters"));
										
				});
			},
			needLogin: function(){
				//chrome.windows.create({url:"http://www.photosight.ru/member/login/"}, function(){alert('Сперва авторизируйтесь!')});
				$(".privateDate").html('Для просмотра данного раздела авторизируйтесь на сайте <a href="http://www.photosight.ru/member/login/" target="_blank">photosight.ru!</a>');
			},
			getXml: function(name, callback)
			{
				var sXml = localStorage.getItem(name);
				var data = (new DOMParser()).parseFromString(sXml, "text/xml");
				callback(data);
			}
		}
		$(window).load(function () {
			setTimeout("popup.init();", 0);
		});
</script>
</head> 
<body id="body"> 
		<div id="tabs" >
			<ul>
				<li><a href="#info">Информация</a></li>
				<li><a href="#my">Мои работы</a></li>
				<li><a href="#favorites">Избранные авторы</a></li>
				<li><a href="#top">Фото недели</a></li>
			</ul>
		<div class="container privateDate" id="info">
			<table width="100%" id="info_table" style="display:none;">
				<tr>
					<td><a id="main_link" target="_main"><img id="avatar"></a></td>
					<td id="about" valign="top">
						<p>
							<div id="nick" style="font-size:14pt; font-family:Calibry, Arial;" ></div>
							<div id="status" ></div>
						</p>
						<hr />
						<p style="font-family:calibri, arial; font-size:11pt;">
							<b>Голосование за статус</b>
							<p style="margin-left:10px;font-family:calibri, arial; font-size:10pt;">
							Повысить: <span id="statusUp" style="font-weight:bold;" ></span><br>
							Понизить: <span id="statusDown" style="font-weight:bold;" ></span><br>
							Оставить: <span id="statusStay" style="font-weight:bold;" ></span><br>
							</p>
						</p>
						<hr />
							<p style="margin-left:10px;font-family:calibri, arial; font-size:10pt;">
							Ждут работ: <span id="favourited_authors" style="font-weight:bold;" ></span><br>
							Ждут комментариев: <span id="favourited_commenters" style="font-weight:bold;" ></span><br>
							</p>
							<br><br>
							<p align="right">
								<a href="http://www.photosight.ru/my/photos/upload/" target="_main">Добавить фото</a>
							
							</p>
					</td>
				</tr>
			</table>
		</div>
		<div class="container privateDate" id="my"></div>
		<div class="container privateDate" id="favorites"></div>		
		<div class="container" id="top"></div>		
	</div>
</body> 
</html> 